<template>

<el-container>
  <el-header class="main">
        <el-button :autofocus="autofocus1"  size="small" round>阿巴</el-button>
      <el-button :autofocus="autofocus2" size="small" round>狗叫</el-button>
      <el-button :autofocus="autofocus3" size="small" round>大雨</el-button>
       <el-link icon="el-icon-sugar" href="https://element.eleme.io"  class="f"  :underline="false" target="_blank">糖果</el-link>
       <el-link icon="el-icon-s-comment" href="https://element.eleme.io" class="f1" :underline="false">信息</el-link>
     
    <el-dropdown>
  <span class="el-dropdown-link  f1" >
      
    用户<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item divided>退出</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
  </el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>


</template>
<script>
export default {
    data(){
        return{
            autofocus1:true,
            autofocus2:false,
            autofocus3:false
        }
    }
  
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
  background-color: rgb(255, 255, 255);
}
.f{
    margin-left: 800px;
    font-size: 17px;
}
.f1{
     margin-left: 10px;
        font-size: 17px;
}
</style>